<template>
  <div class="container">
    <nav-bar title="积分转赠" />
    <div class="main">
      <div class="amount">
        <h3>{{userInfoDetail.Integral}}</h3>
      </div>
      <div class="dis">
        您可以使用积分抵扣商品以及课程报名，100积分抵1元
      </div>
    </div>
    <div class="send-form">
      <div class="item">
        <div class="label">输入好友ID</div>
        <input type="text" v-model="friend"  />
      </div>
      <div class="item">
        <div class="label">转赠积分</div>
        <input type="text" v-model="sendScore" />
      </div>
      <div class="tips">
        <span>积分{{userInfoDetail.Integral}}，</span>
        <i @click="sendAll">全部转赠</i>
      </div>
      <div class="sure" @click="send">确认转赠</div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { getUserDetail, sendIntegral } from '../../network/user'
import { Toast } from 'vant'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      userInfoDetail: {},
      sendScore: 0,
      friend: '',
      sending: false,
    }
  },
  mounted() {
    this.getUserDetail()
  },
  methods: {
    // 获取积分总额
    getUserDetail(){
      let requestData = {
        userkey: this.userKey
      }
      getUserDetail(requestData, info => {
        this.userInfoDetail = info
      })
    },
    // 全部转赠
    sendAll(){
      this.sendScore = this.userInfoDetail.Integral
    },
    // 转赠
    async send(){
      if(this.sending){
        return false
      }
      await this.checkForm()
      console.log('pass')
      let requestData = {
        userkey: this.userKey,
        integral: this.sendScore,
        userName: this.friend,
        reMark: '',
      }
      this.sending = true
      sendIntegral(requestData, () => {
        Toast('转赠成功')
        setTimeout(() => {
          this.sending = false
          this.$router.push('/score')
        }, 2000);
      })
    },
    checkForm(){
      return new Promise((resolve, reject) => {
        if(this.friend === ''){
          Toast('请输入好友ID')
          return false
        }
        if(this.sendScore === '' || this.sendScore === 0){
          Toast('请输入转赠积分')
          return false
        }
        resolve()
      })
    }
  },
}
</script>

<style scoped>
.main{
  height: 110px;
  color: #ffffff;
  background-color: #000000;
}
.main .amount{
  color: #ffffff;
  padding: 20px 25px 0 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.main .amount h3{
  font-size: 18px;
  padding-top: 5px;
}
.main .amount .send{
  width: 100px;
  line-height: 30px;
  border-radius: 30px;
  font-size: 12px;
  text-align: center;
  background-color: #646161;
}
.main .dis{
  padding: 15px 25px 30px 25px;
  font-size: 12px;
}
.send-form{
  margin: 15px;
  border-radius: 5px;
  min-height: 100px;
  padding: 0 35px 80px 35px;
  background-color: #ffffff;
}
.send-form .item{
  padding-top: 33px;
}
.send-form .item .label{
  font-size: 14px;
  line-height: 1;
}
.send-form .item input{
  display: block;
  width: 100%;
  height: 46px;
  border-bottom: 1px solid #eae9e9;
}
.tips{
  font-size: 14px;
  line-height: 3;
}
.tips i{
  color: #0598dd;
}
.sure{
  line-height: 50px;
  text-align: center;
  color: #ffffff;
  font-size: 16px;
  border-radius: 5px;
  margin-top: 50px;
  background-color: #000000;
}
</style>